<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <el-card shadow="never">
          <el-row style="width: 500px;margin: auto;margin-bottom: 40px">
            <el-steps :active="active" align-center>
              <el-step title="第1步" description="请写转账信息"></el-step>
              <el-step title="第2步" description="确认转账信息"></el-step>
              <el-step title="第3步" description="完成"></el-step>
            </el-steps>
          </el-row>
          <el-row style="width: 500px;margin: auto" v-if="active==1">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="付款账户" prop="payer">
                <el-input v-model="ruleForm.payer" type="password"></el-input>
              </el-form-item>
              <el-form-item label="收款账户" prop="receiver">
                <el-input v-model="ruleForm.receiver" type="password"></el-input>
              </el-form-item>
              <el-form-item label="收款人姓名" prop="payerName">
                <el-input v-model="ruleForm.payerName" type="password"></el-input>
              </el-form-item>
              <el-form-item label="转账金额" prop="money">
                <el-input v-model="ruleForm.money" oninput="value=value.replace(/[^\d]/g,'')"></el-input>
              </el-form-item>
              <el-form-item class="bottom">
                <el-button type="primary" @click="upForm('ruleForm')" size="medium">下一步</el-button>
              </el-form-item>
              <el-alert
                title="转账到支付宝"
                type="success"
                :closable="false"
                description="生活好，支付宝。生活好，支付宝。生活好，支付宝。生活好，支付宝。"
              >
              </el-alert>
              <el-alert
                title="转账到微信"
                type="success"
                :closable="false"
                description="微不可挡，万众一信。微不可挡，万众一信。微不可挡，万众一信。微不可挡，万众一信。"
              >
              </el-alert>
            </el-form>
          </el-row>
          <el-row style="width: 500px;margin: auto" v-if="active==2">
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px" :rules="rulePassword" class="demo-ruleForm">
              <el-form-item label="付款账户" prop="payer">
                {{ ruleForm.payer }}
              </el-form-item>
              <el-form-item label="收款账户" prop="receiver">
                {{ ruleForm.receiver }}
              </el-form-item>
              <el-form-item label="收款人姓名" prop="payerName">
                {{ ruleForm.payerName }}
              </el-form-item>
              <el-form-item label="转账金额" prop="money">
                {{ '￥' + ruleForm.money + '元' }}
              </el-form-item>
              <el-form-item label="支付密码" prop="password">
                <el-input v-model="ruleForm.password" type="password"></el-input>
              </el-form-item>
              <el-form-item class="bottom">
                <el-button type="primary" @click="submitForm()" size="medium" class="btn">
                  <i class="el-icon-loading" v-if="isLoading"></i>
                  提交
                </el-button>
                <el-button type="primary" @click="downForm()" size="medium">上一步</el-button>
              </el-form-item>
            </el-form>
          </el-row>
          <el-row style="width: 500px;margin: auto" v-if="active==3">
            <div class="pay-top-content">
              <i class="ri-checkbox-circle-line pay-success"></i>
              <p>支付成功</p>
            </div>
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm bgc">
              <el-form-item label="付款账户" prop="payer">
                {{ ruleForm.payer }}
              </el-form-item>
              <el-form-item label="收款账户" prop="receiver">
                {{ ruleForm.receiver }}
              </el-form-item>
              <el-form-item label="收款人姓名" prop="payerName">
                {{ ruleForm.payerName }}
              </el-form-item>
              <el-form-item label="转账金额" prop="money">
                {{ '￥' + ruleForm.money + '元' }}
              </el-form-item>
            </el-form>
            <div style="text-align: center">
              <el-button type="primary" @click="resetForm()" size="medium">再转一笔</el-button>
            </div>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'distribution',
  data() {
    let checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请选择转账金额'))
      }
      setTimeout(() => {
        if (!Number.isInteger(Number(value))) {
          callback(new Error('请输入合法金额数字'))
        } else {
          callback()
        }
      }, 500)
    }
    return {
      isLoading: false,
      active: 1,
      ruleForm: {
        payer: '1856584515',
        receiver: '1856584515',
        payerName: '河北彩花',
        password: '4878151545',
        money: 100
      },
      rulePassword: {
        password: [
          { required: true, message: '请输入支付密码', trigger: 'blur' }
        ]

      },
      rules: {
        payer: [
          { required: true, message: '请选择付款账户', trigger: 'blur' },
          { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ],
        receiver: [
          { required: true, message: '请选择收款账户', trigger: 'blur' },
          { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ],
        payerName: [
          { required: true, message: '请选择收款人姓名', trigger: 'blur' }
        ],
        money: [
          { required: true, validator: checkAge, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    resetForm() {
      this.active = 1
    },
    downForm() {
      this.active -= 1
    },
    submitForm() {
      this.isLoading = true
      setTimeout(() => {
        this.isLoading = false
        this.active += 1
      }, 1500)
    },
    upForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.active += 1
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  ::v-deep.el-form-item__label {
    font-weight: 400;
  }

  .bgc {
    padding: 20px;
    margin-top: 20px;
    background: #f5f7f8;
    border: 1px dashed #dcdfe6;
    border-radius: 2.5px;
    margin-bottom: 20px;
  }

  .btn {
    width: 88px;
  }

  ::v-deep.is-light {
    color:#1890ff;
    background-color: #e8f4ff;
  }
  .el-alert{
    padding: 16px 16px;
    border-radius: 0!important;
  }
  .bottom {
    text-align: center;

    ::v-deep.el-form-item__content {
      margin-left: 0 !important;
    }
  }

  .pay-top-content {
    text-align: center;

    i {
      display: block;
      margin: 20px auto 5px auto;
      font-size: 40px;
      color: #13ce66;
    }

    p {

    }
  }
}
</style>
